// public
// 创建编辑页
function backGround(obj){
	var oBackg = document.createElement("div");
	oBackg.className = "backg";
	obj.appendChild(oBackg);
	return oBackg;
}
// 把数据保存为字典
function getEduValue(obj,name){
	var info = {};
	var oAdd = obj.getElementsByClassName("input");
	for(var i=0;i<oAdd.length;i++){		
		info[name[i]]=oAdd[i].value;
	};
	return info;
}
// skills
// 创建一个简单的sliderRange
function SliderRange(sKillName,oId,obj){
	this.skillValue = 60;
	this.sKillName = sKillName;
	this.oId = oId;
	this.obj = obj;
	this.createEle();
	this.check();
	this.del();
}
SliderRange.prototype.createEle = function(){
	this.oLi = document.createElement("div");	
	var oName = document.createElement("span");
	this.oDel = document.createElement("span");
	this.oScore = document.createElement("span");
	this.oRange = document.createElement('input');
	var oDiv = document.createElement("div");
// range前面的填充
	this.oColor = document.createElement('span');

	oName.style.marginLeft="10px";
	oName.className = "skill-name";
	oName.innerHTML = this.sKillName;
	this.oLi.style.marginBottom = "10px";
	this.oDel.innerHTML = "删除";
	this.oDel.style.marginLeft = "30%";
	this.oDel.style.cursor = "pointer";
	this.oDel.style.color = "#f00";
	this.oScore.style.marginRight = "10px";
	this.oScore.style.cssFloat="right";
	this.oScore.innerHTML = this.skillValue;
	oDiv.style.position = "relative";
	oDiv.style.width = "100%";
	this.oRange.type = "range";
	this.oRange.value = this.skillValue;
	
	this.oId.appendChild(this.oLi);
	this.oLi.appendChild(oName);
	this.oLi.appendChild(this.oDel);
	this.oLi.appendChild(this.oScore);
	this.oLi.appendChild(oDiv);
	oDiv.appendChild(this.oRange);
// 待oRange绑定到dom上后才有长度
	this.oColor.className = "rangeColor";
	this.rate = this.oRange.offsetWidth/100;
	this.oColor.style.width = this.skillValue*this.rate + "px";
	oDiv.appendChild(this.oColor);
};
SliderRange.prototype.rangeChange = function(){
	var newvalue = this.oRange.value;
	this.oScore.innerHTML = newvalue;
	this.oColor.style.width = newvalue*this.rate + "px";
}
SliderRange.prototype.check = function(){
	var that = this;
	that.oRange.addEventListener("input",function(){
		that.rangeChange();
	});
}
SliderRange.prototype.del = function(){
	var that = this;
	that.oDel.addEventListener("click",function(){
		if(that.oId.childNodes.length<2){
			var oSave = that.oId.parentNode.querySelector(".savebox");	
			oSave.style.display = "none";
			that.obj.removeChild(that.oId);
		}else{
			that.obj.removeChild(that.oId);
		}	
	});
}
// 输入技能名的框
function addSkill(obj){
	var oEnter = document.createElement("div");
	oEnter.className = "enter enter-sk";
	var oCancel = document.createElement("div");
	oCancel.className = "cancel";
	oCancel.innerHTML= "&times";
	var oAddTitle = document.createElement("p");
	oAddTitle.className = "addtitle";
	oAddTitle.innerHTML = "添加技能";
	var oInput = document.createElement("input");
	oInput.type = "text";
	oInput.name = "skill";
	oInput.placeholder = "10字以内";
	var oButton = document.createElement("button");
	oButton.className = "button";
	oButton.innerHTML = "确定";
	obj.appendChild(oEnter);
	oEnter.appendChild(oCancel);
	oEnter.appendChild(oAddTitle);
	oEnter.appendChild(oInput);
	oEnter.appendChild(oButton);
	return [oCancel,oButton];
}
// 生成编辑页面框
function Editbox(obj){
	this.obj = obj;
	this.oSbox = document.createElement('div');
	this.oSbox.className = "sbox3 skills";
	this.oText = document.createElement("div");
	this.oText.className = "contextskills";
	this.oText.innerHTML = '<p>简略描述</p><textarea class="textarea input">';
	this.oSbox.appendChild(this.oText);
	var boxSkill = document.querySelector(".box-skill");
	obj.insertBefore(this.oSbox,boxSkill);
	this.oSave = obj.querySelector(".savebox");
	this.oEdit = obj.querySelector(".editbox");
	this.oSmallSave = obj.querySelector(".com-save");
	this.oSmallEdit = obj.querySelector(".com-edit");
	this.oSave.style.display = "block";
	var that = this;
	that.oSmallSave.onclick = function(){
		that.showSkill();
		that.oEdit.style.display="block";
		that.oSave.style.display = "none";
		that.sbox3 = that.obj.querySelectorAll(".sbox3");
		for(var i=0;i<that.sbox3.length;i++){
			that.sbox3[i].style.display = "none";
		}
		that.boxSkill = that.obj.querySelector(".box-skill");
		that.boxSkill.style.display = "none";
	}
	return this.oSbox;
}
Editbox.prototype.showSkill=function(){
	var oValue = document.querySelectorAll('input[type="range"]');
	var oName = document.getElementsByClassName('skill-name');
	var describe = this.obj.getElementsByClassName("input");	
	for(var i=0;i<oValue.length;i++){
		var name=oName[i].innerHTML;
		var value = oValue[i].value;
		var desc = describe[i].value;
		createBar(this.obj,name,value,desc);
	}
	var that = this;
	that.oSmallEdit.onclick = function(){
		var obo = that.obj.querySelectorAll(".sbox");
		for(var i=0;i<obo.length;i++){
			obo[i].style.display = "none";
			obo[i].classList.add("toClear");
		}
		that.boxSkill.style.display = "block";
		for(var i=0;i<that.sbox3.length;i++){
			that.sbox3[i].style.display = "block";
		}		
		that.oEdit.style.display="none";
		that.oSave.style.display = "block";
	}
	that.oToclear = document.getElementsByClassName("toClear");
	for(var i=0;i<that.oToclear.length;i++){
		that.obj.removeChild(that.oToclear[i]);
	}	
}
function createBar(obj,name,value,desc){
	var oBigWrap = document.createElement("div");
	oBigWrap.className = "sbox";
	var oWrap = document.createElement("div");
	obj.appendChild(oBigWrap);
	oBigWrap.appendChild(oWrap);
	var oName = document.createElement("span");
	oName.style.marginLeft="10px";
	oName.className = "skillsName";
	oName.innerHTML = name;
	oWrap.appendChild(oName);
	var oScore = document.createElement("span");
	oScore.style.marginRight = "10px";
	oScore.style.cssFloat="right";
	oScore.className = "skillsValue";
	oScore.innerHTML = value;
	oWrap.appendChild(oScore);
	var oDiv = document.createElement("div");
	oDiv.style.position = "relative";
	oDiv.style.width = "100%";
	oWrap.appendChild(oDiv);
	var oBar = document.createElement("div");
	oBar.className = "skill-bar";
	oDiv.appendChild(oBar);
	var oColor = document.createElement("span");
	oColor.className = "rangeColor";
	var rate = oBar.offsetWidth/100;
	oColor.style.width = value*rate + "px";
	oDiv.appendChild(oColor);
	var eleDesc = document.createElement("p");
	eleDesc.innerHTML = desc;
	eleDesc.className = "skillsDesc";
	oBigWrap.appendChild(eleDesc);
}

function AddModel(obj){
	this.oEnter = document.createElement("div");
	this.oEnter.className = "enter";
	this.oCancel = document.createElement("div");
	this.oCancel.className = "cancel";
	this.oCancel.innerHTML= "&times;";
	this.oAddTitle = document.createElement("p");
	this.oAddTitle.className = "addtitle";
	this.oButton = document.createElement("button");
	this.oButton.className = "button";
	this.oButton.innerHTML = "确定";
	obj.appendChild(this.oEnter);
	this.oEnter.appendChild(this.oCancel);
	this.oEnter.appendChild(this.oAddTitle);
	this.oEnter.appendChild(this.oButton);
}
function EditEdu(main,obj,data){
	this.main =main;
	this.obj = obj;
	this.editEdu = new ShowModel(this.main,this.obj,data);
	this.editEdu.oBox.className = "cont-box sbox2";
	this.oDel = document.createElement("span");
	this.oDel.className="red com-del";
	this.oDel.innerHTML = "删除";
	this.editEdu.oBox.appendChild(this.oDel);
	this.oChange = document.createElement("span");
	this.oChange.className = "blue com-change";
	this.oChange.innerHTML = "修改";
	this.editEdu.oBox.appendChild(this.oChange);
	this.oSave = this.main.querySelector(".savebox");
	this.oEdit = this.main.querySelector(".editbox");
	this.oSmallSave = this.main.querySelector(".com-save");
	this.oSmallEdit = this.main.querySelector(".com-edit");
	this.boxEdu = this.main.querySelector(".addbox");
	
	this.clickDel();
	this.clickChange();
	this.clickSave();
	this.clickEdit();
}
EditEdu.prototype.clickDel = function(){
	var that = this;
	that.oDel.addEventListener("click",function(){
		var wrapboxs = that.main.querySelectorAll(".wrapbox");
		if(wrapboxs.length<2){			
			that.oSave.style.display = "none";
			that.main.removeChild(that.obj);
		}else{
			that.main.removeChild(that.obj);
		}		
	})
}
EditEdu.prototype.clickChange = function(){
	var that = this;
	that.oChange.addEventListener("click",function(){
		var oBackg = that.main.querySelector(".backg");
		oBackg.style.display = "block";
	})
	var oShows = that.obj.querySelectorAll(".cont-box");
	for(var i=0;i<(oShows.length-1);i++){
		that.obj.removeChild(oShows[i]);
	}
}
EditEdu.prototype.clickSave = function(){
	var that = this;
	that.oSmallSave.addEventListener("click",function(){
		that.editEdu.oBox.className = "cont-box sbox";
		that.oDel.style.display = "none";
		that.oChange.style.display = "none";
		that.boxEdu.style.display = "none";
		that.oSave.style.display = "none";
		that.oEdit.style.display = "block";
	})
}	
EditEdu.prototype.clickEdit = function(){
	var that = this;
	that.oSmallEdit.addEventListener("click",function(){
		that.editEdu.oBox.className = "cont-box sbox2";
		that.oDel.style.display = "block";
		that.oChange.style.display = "block";
		that.boxEdu.style.display = "block";
		that.oEdit.style.display = "none";
		that.oSave.style.display = "block";
	})
}

function addSection(obj,data){
	obj.oAdd.onclick = function(){
		var wrap = document.createElement("div");
		wrap.className = "wrapbox";
		obj.oMain.appendChild(wrap);
		var oBackg = backGround(wrap);
		var info = new AddModel(oBackg);
		info.oEnter.classList.add(obj.cls);
		info.oAddTitle.innerHTML = obj.title;
		var wrapInput = document.createElement("div");
		wrapInput.innerHTML = obj.innerh;
		info.oEnter.insertBefore(wrapInput,info.oButton);
		info.oCancel.addEventListener("click",function(){
			oBackg.style.display = "none";
		});
		var oIntext = wrap.querySelectorAll('input[type="text"]');
		info.oButton.addEventListener("click",function(){
			for(var i=0;i<oIntext.length;i++){
				if(oIntext[i].value==""){
					return false;
				}
			}
			var ededu = new EditEdu(obj.oMain,wrap,data);
			var oSave = obj.oMain.querySelector(".savebox");
			oSave.style.display = "block";
			var oShows = wrap.querySelectorAll('.cont-box');
			oBackg.style.display = "none";
		})
	}	
}
function ShowModel(main,obj,fn){
	this.obj = obj;
	var inner = fn(this.obj);
	this.oBox = document.createElement("div");
	this.obj.appendChild(this.oBox);
	this.oBox.innerHTML = inner;
	var box = main.querySelector(".addbox");
	main.insertBefore(this.obj,box);
}
function eduData(obj){
	var name = ["time","school","degree","major","eduother"];
	// var cls = "add-exp";
	var info = getEduValue(obj,name);
	var inner = "";
	inner += '<div><span class="eduTime">'+info["time"]+'</span><span class="school">'+info["school"]+'</span></div>';
	inner += '<div><span class="degree">'+info["degree"]+'</span><span> | </span><span class="major">'+info["major"]+'</span></div>';
	inner += '<span class="eduOther">'+info["eduother"]+'</span>';
	return inner;
}
function expData(obj){
	var name = ["time","company","position","jobDescribe"];
	// var cls = "add-exp";
	var info = getEduValue(obj,name);
	var inner = "";
	inner += '<div><span class="jobTime">'+info["time"]+'</span></div>';
	inner += '<div><span class="company">'+info["company"]+'</span></div>';
	inner += '<div><span class="position">'+info["position"]+'</span></div>';
	inner += '<p class="paragraph jobDescribe">'+info["jobDescribe"]+'</p>';
	return inner
}
function myinfoData(obj){
	var name = ["myinfo-name","myinfo-gender","most-degree","myinfo-years","city","phone","email"];
	var info = getEduValue(obj,name);
	var inner = "";
	inner += '<div><span class="justify">姓名</span><span>：</span><span id="name">'+info["myinfo-name"]+'</span></div>';
	inner += '<div><span class="justify">性别</span><span>：</span><span id="gender">'+info["myinfo-gender"]+'</span></div>';
	inner += '<div><span class="justify">最高学历</span><span>：</span><span id="highestEdu">'+info["most-degree"]+'</span></div>';
	inner += '<div><span class="justify">工作年限</span><span>：</span><span id="yearsOfWorking">'+info["myinfo-years"]+'</span></div>';
	inner += '<div><span class="justify">所在城市</span><span>：</span><span id="city">'+info["city"]+'</span></div>';
	inner += '<div><span class="justify">联系电话</span><span>：</span><span id="phone">'+info["phone"]+'</span></div>';
	inner += '<div><span class="justify">联系邮箱</span><span>：</span><span id="email">'+info["email"]+'</span></div>';
	return inner
}
function expectData(obj){
	var name = ["jobtype","time-type","expect-city","expect-pay","other"];
	var info = getEduValue(obj,name);
	var inner = "";
	inner += '<div><span>'+info["jobtype"]+'</span></div>';
	inner += '<div><span>'+info["time-type"]+'/</span><span>'+info["expect-city"]+'/</span>';
	inner += '<span>'+info["expect-pay"]+'</span></div>';
	inner += '<p class="paragraph">'+info["other"]+'</p>';
	return inner;
}

function demoData(obj){
	var name = ["demoname","demolink","demodescribe"];
	var info = getEduValue(obj,name);
	var inner = "";
	inner += '<div>'+info["demoname"]+'</div>';
	inner += '<div>'+info["demolink"]+'</div>';
	inner += '<p class="paragraph">'+info["demodescribe"]+'</p>';
	return inner;
}